<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Sample - JQuery tabs</title>
<script src="/mvn-web/public/javascripts/jquery.js" type="text/javascript"></script>
<script src="/mvn-web/public/javascripts/json.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#tabs').each(function(){
		    // For each set of tabs, we want to keep track of
		    // which tab is active and it's associated content
		    var $active, $content, $links = $(this).find('a');

		    alert('a');
		    
		    // Use the first link as the initial active tab
		    $active = $links.first().addClass('active');
		    $content = $('#' + $active.attr('id') + '-content');
		    
		    alert($content.attr('id'));

		    // Hide the remaining content
		    $links.not(':first').each(function () {
		        $('#' + $(this).attr('id') + '-content').hide();
		    });

		    // Bind the click event handler
		    $(this).on('click', 'a', function(e){
		        // Make the old tab inactive.
		        $active.removeClass('active');
		        $content.hide();

		        // Update the variables with the new link and content
		        $active = $(this);
		        $content = $('#' + $(this).attr('id') + '-content');

		        // Make the tab active.
		        $active.addClass('active');
		        $content.show();

		        // Prevent the anchor's default click action
		        e.preventDefault();
		    });
		});
	})
</script>
</head>
<body>
	<a href="/mvn-web">Home</a>
	<a href="/mvn-web/admin">Admin</a>
	<ul id="tabs" class='tabs'>
	    <li><a href='/' id="tab-general">Tab 1</a></li>
	    <li><a href='/' id="tab-users">Tab 2</a></li>
	    <li><a href='/' id="tab-memberships">Tab 3</a></li>
	</ul>
	<div id='tab-general-content'>
	    <p>Hi, this is the first tab.</p>
	</div>
	<div id='tab-users-content'>
	    <p>This is the 2nd tab.</p>
	</div>
	<div id='tab-memberships-content'>
	    <p>And this is the 3rd tab.</p>
	</div>
</body>
</html>